<template>
  <div class="system-settings">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="基本设置" name="basic">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>平台基本信息</span>
            </div>
          </template>
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="平台名称">
              <el-input v-model="basicSettings.siteName" />
            </el-form-item>
            <el-form-item label="平台描述">
              <el-input v-model="basicSettings.description" type="textarea" />
            </el-form-item>
            <el-form-item label="备案信息">
              <el-input v-model="basicSettings.beian" />
            </el-form-item>
            <el-form-item label="版权信息">
              <el-input v-model="basicSettings.copyright" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="小程序配置" name="miniapp">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>微信小程序配置</span>
            </div>
          </template>
          <el-form :model="miniappSettings" label-width="120px">
            <el-form-item label="AppID">
              <el-input v-model="miniappSettings.appId" />
            </el-form-item>
            <el-form-item label="AppSecret">
              <el-input v-model="miniappSettings.appSecret" type="password" />
            </el-form-item>
            <el-form-item label="服务器域名">
              <el-input v-model="miniappSettings.serverDomain" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveMiniappSettings">保存配置</el-button>
              <el-button @click="testConnection">测试连接</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="存储配置" name="storage">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>文件存储配置</span>
            </div>
          </template>
          <el-form :model="storageSettings" label-width="120px">
            <el-form-item label="存储方式">
              <el-select v-model="storageSettings.type" placeholder="请选择存储方式">
                <el-option label="本地存储" value="local" />
                <el-option label="阿里云OSS" value="oss" />
                <el-option label="腾讯云COS" value="cos" />
              </el-select>
            </el-form-item>
            <div v-if="storageSettings.type === 'oss'">
              <el-form-item label="Endpoint">
                <el-input v-model="storageSettings.oss.endpoint" />
              </el-form-item>
              <el-form-item label="AccessKeyId">
                <el-input v-model="storageSettings.oss.accessKeyId" />
              </el-form-item>
              <el-form-item label="AccessKeySecret">
                <el-input v-model="storageSettings.oss.accessKeySecret" type="password" />
              </el-form-item>
              <el-form-item label="Bucket">
                <el-input v-model="storageSettings.oss.bucket" />
              </el-form-item>
            </div>
            <div v-if="storageSettings.type === 'cos'">
              <el-form-item label="Region">
                <el-input v-model="storageSettings.cos.region" />
              </el-form-item>
              <el-form-item label="SecretId">
                <el-input v-model="storageSettings.cos.secretId" />
              </el-form-item>
              <el-form-item label="SecretKey">
                <el-input v-model="storageSettings.cos.secretKey" type="password" />
              </el-form-item>
              <el-form-item label="Bucket">
                <el-input v-model="storageSettings.cos.bucket" />
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="saveStorageSettings">保存配置</el-button>
              <el-button @click="testStorage">测试存储</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="邮件配置" name="email">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>邮件服务配置</span>
            </div>
          </template>
          <el-form :model="emailSettings" label-width="120px">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailSettings.smtpHost" />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input v-model="emailSettings.smtpPort" />
            </el-form-item>
            <el-form-item label="邮箱账号">
              <el-input v-model="emailSettings.email" />
            </el-form-item>
            <el-form-item label="邮箱密码">
              <el-input v-model="emailSettings.password" type="password" />
            </el-form-item>
            <el-form-item label="发件人名称">
              <el-input v-model="emailSettings.senderName" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">保存配置</el-button>
              <el-button @click="testEmail">测试邮件</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'SystemSettings',
  setup() {
    const activeTab = ref('basic')
    
    // 基本设置
    const basicSettings = reactive({
      siteName: '中国剪纸展示平台',
      description: '传承和推广中国传统剪纸文化',
      beian: '京ICP备XXXXXXXX号',
      copyright: '© 2023 中国剪纸展示平台 版权所有'
    })
    
    // 小程序配置
    const miniappSettings = reactive({
      appId: 'wxa1b2c3d4e5f6g7h8',
      appSecret: '1234567890abcdef1234567890abcdef',
      serverDomain: 'https://api.example.com'
    })
    
    // 存储配置
    const storageSettings = reactive({
      type: 'local',
      oss: {
        endpoint: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: ''
      },
      cos: {
        region: '',
        secretId: '',
        secretKey: '',
        bucket: ''
      }
    })
    
    // 邮件配置
    const emailSettings = reactive({
      smtpHost: 'smtp.example.com',
      smtpPort: '465',
      email: 'admin@example.com',
      password: 'password',
      senderName: '剪纸平台管理员'
    })
    
    // 保存基本设置
    const saveBasicSettings = () => {
      ElMessage.success('基本设置保存成功')
    }
    
    // 保存小程序配置
    const saveMiniappSettings = () => {
      ElMessage.success('小程序配置保存成功')
    }
    
    // 测试连接
    const testConnection = () => {
      ElMessage.info('正在测试连接...')
      // 模拟测试过程
      setTimeout(() => {
        ElMessage.success('连接测试成功')
      }, 1000)
    }
    
    // 保存存储配置
    const saveStorageSettings = () => {
      ElMessage.success('存储配置保存成功')
    }
    
    // 测试存储
    const testStorage = () => {
      ElMessage.info('正在测试存储...')
      // 模拟测试过程
      setTimeout(() => {
        ElMessage.success('存储测试成功')
      }, 1000)
    }
    
    // 保存邮件配置
    const saveEmailSettings = () => {
      ElMessage.success('邮件配置保存成功')
    }
    
    // 测试邮件
    const testEmail = () => {
      ElMessage.info('正在发送测试邮件...')
      // 模拟测试过程
      setTimeout(() => {
        ElMessage.success('测试邮件发送成功')
      }, 1000)
    }
    
    return {
      activeTab,
      basicSettings,
      miniappSettings,
      storageSettings,
      emailSettings,
      saveBasicSettings,
      saveMiniappSettings,
      testConnection,
      saveStorageSettings,
      testStorage,
      saveEmailSettings,
      testEmail
    }
  }
}
</script>

<style scoped>
.system-settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form {
  max-width: 600px;
}
</style>